<div class="form-group">
  <label class="control-label" style="text-align: right;">Select2</label>
  <div>
    <select2 [options]="options" [settings]="{ placeholder: 'Specifies the placeholder through settings', width: '50%' }" [(ngModel)]="optionSelected"
      (onSelect)="onSelect($event)"></select2>
    <p *ngIf="optionSelected">value: {{optionSelected}}</p>
  </div>
</div>
<div class="form-group">
  <label class="control-label" style="text-align: right;">Select2 with multiple enable</label>
  <div>
    <select2 [options]="options" [settings]="{ placeholder: 'Specifies the placeholder through settings', width: '50%', multiple: true }"
      [(ngModel)]="optionsSelected" (onSelect)="onSelect($event)"></select2>
    <p *ngIf="optionsSelected">value: {{optionsSelected}}</p>
  </div>
</div>
<div class="form-group">
    <input type="text" class="form-control" [(ngModel)]="inputVal" />
    <a class="btn btn-default" (click)="changeValue()">change value</a>
</div>
<div class="form-group">
  <a class="btn btn-default" (click)="changeOptions()">change options</a>
</div>
<div class="form-group">
    <label class="control-label" style="text-align: right;">Select2 With Settings Change</label>
    <div>
      <select2 [settings]="settings" [(ngModel)]="settingsOptionSelected"
        (onSelect)="onSelect($event)"></select2>
      <p *ngIf="optionSelected">value: {{settingsOptionSelected}}</p>
    </div>
  </div>
  <div class="form-group">
    <a class="btn btn-default" (click)="changeSettings()">change settings</a>
  </div>